<template>
	<view class="content">
		<view class="item u-border-bottom">
			<view class="title-wrap">
				<image src="" mode=""></image>
				<view class="right-info">
					<text class="title u-line-2">鸡腿堡</text>
					<view class="num">
						X<text style="font-size: 24rpx;">1</text>
					</view>
					<view class="buyAgain">
						<view class="">
							2000<text style="font-size: 24rpx;">元</text>
						</view>

						<view class="buy">
							申请售后
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-info">
			<view class="orderInfo-item">
				<text>实付款</text>
				<view style="color: #FE6000;">
					3000元
				</view>
			</view>
			<view class="orderInfo-item">
				<text>订单号</text>
				<view class="">
					<view>66235527489723384</view>
					<image src="../../static/parkingLot/ico_xl1.png" mode=""></image>
				</view>
			</view>

			<view class="orderInfo-item">
				<text>收货信息</text>
				<view style="width: 440rpx;line-height: 50rpx;text-align: right;">
					江先生，135****3729，广东省广
					州市白云区嘉禾街道206号
				</view>
			</view>
			<view class="orderInfo-item">
				<text>下单时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>付款时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>收货时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>成交时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
		</view>
		<view class="logistics">
			<text style="font-size: 32rpx;
color: #333333;font-weight: 600;">物流信息</text>
			<view style="margin: 40rpx;">


				<u-time-line>
					<u-time-line-item>
						<template v-slot:content>
							<view>
								<view class="u-order-desc">2019-12-06 22:30</view>
								<view class="u-order-time">[保定市]河北保定分拨营销市场部已揽收营销市场部已揽收</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
				<u-time-line>
					<u-time-line-item>
						<template v-slot:content>
							<view>
								<view class="u-order-desc">2019-12-06 22:30</view>
								<view class="u-order-time">[保定市]河北保定分拨营销市场部已揽收</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onPullDownRefresh() {
			this.params.pageNum = 1
			this.PostCollectList() //获取数据
		},
		//上拉加载触发方法
		onReachBottom() {
			if (this.hasNextPage) { //判断是否还有数据需要加载
				this.params.pageNum = this.params.pageNum + 1
				this.loading.status = "loadingText"
				this.PostCollectList() //获取数据
			} else {
				this.loading.status = "nomoreText"
			}
		},
		methods: {

		}

	};
</script>

<style scoped lang="scss">
	.content {
		padding: 24rpx;
		box-sizing: border-box;

		.item {
			padding: 20rpx;
			width: 702rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			box-shadow: 0 6rpx 20rpx 0 #99999933;
			border-radius: 16rpx;
			margin-bottom: 24rpx;

			.title {
				text-align: left;
				font-size: 28rpx;

			}

			.title-wrap {
				display: flex;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
					background: #CCCCCC;
				}

				.right-info {
					flex: 1;
					margin-left: 24rpx;

					.num {
						margin: 16rpx 0 46rpx;
						color: #999;
					}

					.buyAgain {
						display: flex;
						align-items: center;
						justify-content: space-between;

						view {
							font-size: 36rpx;
							color: #FE6000;
							font-weight: 700;
						}

						.buy {
							background: #1677FE;
							border-radius: 4rpx;
							font-size: 24rpx;
							padding: 12rpx 16rpx;
							color: #fff
						}
					}
				}
			}
		}

		.order-info {
			border: 1rpx solid #CCCCCC;
			box-shadow: 0 6rpx 20rpx 0 #99999933;
			border-radius: 16rpx;
			line-height: 77rpx;
			padding: 22rpx 24rpx;
		}

		.orderInfo-item {
			display: flex;
			justify-content: space-between;

			text:nth-of-type(1) {
				color: #999999;
			}

			view {
				display: flex;
				align-items: center;
			}

			image {
				display: block;
				width: 28rpx;
				height: 28rpx;
				margin-left: 16rpx;
			}

			.in-detail {
				width: 480rpx;
				line-height: 50rpx;
			}
		}





	}

	.logistics {
		margin-top: 24rpx;
		border: 1rpx solid #CCCCCC;
		box-shadow: 0 6rpx 20rpx 0 #99999933;
		border-radius: 16rpx;
		padding: 40rpx 24rpx;
	}

	.u-order-desc {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		font-size: 28rpx;
		color: #333333;
		line-height: 50rpx;
	}
</style>